﻿@{
    ViewData["Title"] = "教室管理";

}

<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">教室管理</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">教室管理</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <button onclick="ShowPopup('/Classroom/Add/')" type="button" class="btn btn-primary  waves-effect waves-light float-right ladda-button" data-style="expand-left">
                    新建测试教室
                </button>
                <h4 class="header-title mb-4">教室管理</h4>
                <table class="table table-hover m-0 table-centered dt-responsive nowrap w-100" id="datatable">
                    <thead>
                        <tr>

                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th class="hidden-sm">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                    </tbody>
                </table>
            </div>
        </div><!-- end col -->
    </div>


</div> <!-- container -->


<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->


<div id="modalStudents" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom:none">
                <h4 class="modal-title">人员列表</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body p-2">
                <table class="table table-hover m-1 table-centered dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名字</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div><!-- /modal-dialog -->
</div><!-- /.modal -->




@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>

    <script>

        var table;

        $(function () {

            table = $('#datatable').DataTable({
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，没有匹配的数据",
                    "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有匹配的数据",
                    "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "全文搜索：",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                },
                language: {
                    paginate:
                        { previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>" }
                },
                drawCallback: function () { $(".dataTables_paginate > .pagination").addClass("pagination-rounded") },

                "responsive": true,
                "lengthChange": true,
                "searching": false,
                "ordering": false,
                "order": [[0, 'desc']],
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }],
                "serverSide": true,
                ajax: {
                    url: '/Classroom/GetAll',
                    type: 'POST',
                    async: true,
                    data: function (data) {

                        return {
                            param: data
                        };
                    },
                    error: function (jqXHR) {
                        HandleGlobalException(jqXHR);

                    }
                },

                columns: [
                    {
                        title: "ID",
                        data: "meetingID",
                        name: "meetingID"
                    },
                    {
                        title: "名字",
                        data: "meetingName",
                        name: "meetingName",

                    },
                    {
                        title: "开始时间",
                        data: "startTime",
                        name: "startTime",
                        render: function (data, type, row) {

                            return window.moment(parseFloat(data)).format("HH:mm:ss");


                        }
                    },


                    {
                        title: "结束时间",
                        data: "endTime",
                        name: "endTime",
                        render: function (data, type, row) {
                            if (data > 0) {
                                return window.moment(parseFloat(data)).format("HH:mm:ss");
                            }
                            return "";

                        }
                    },
                    {
                        title: "时长",
                        data: "duration",
                        name: "duration"
                    },
                    {
                        title: "空教室?",
                        data: "hasUserJoined",
                        name: "hasUserJoined",
                        render: function (data, type, row) {


                            if (data == "true") {

                                return "<span class='badge badge-dark'>否</span>"
                            }
                            else {
                                return "<span class='badge badge-success'>是</span>"
                            }
                        }
                    },
                    {
                        title: "录屏",
                        data: "recording",
                        name: "recording",
                        render: function (data, type, row) {

                            if (data == "true") {
                                return "<span class='badge badge-success'>是</span>"
                            }
                            else {
                                return "<span class='badge badge-dark'>否</span>"
                            }
                        }
                    },
                    {
                        title: "人数",
                        data: "participantCount",
                        name: "participantCount"
                    },
                    {
                        title: "人员",
                        data: "attendees",
                        name: "attendees",
                        render: function (data, type, row) {

                            if (data.length > 0) {

                                var table = "";
                                data.forEach(element => table += "<tr><td>" + element.userID + "</td>" + "<td>" + element.fullName + "</td>")
                                table += "</tr>";
                                console.log(table);
                                return "<a href='#' onclick='ShowStudents(\"" + table + "\")'>详细</a>";

                            } else {
                                return "";
                            }






                        }
                    },
                    {
                        title: "建立日期",
                        data: "createDate",
                        name: "createDate",
                        render: function (data, type, row) {

                            return window.moment(data).format("YYYY-MM-DD HH:mm:ss");

                        }
                    },
                    {
                        title: "操作",
                        data: null,
                        name: null,
                        render: function (data, type, row) {

                            var html = "<div class='btn-group dropdown'>" +
                                "<a href='javascript: void(0);' class='table-action-btn dropdown-toggle arrow-none btn btn-outline-secondary waves-effect btn-sm' data-toggle='dropdown' aria-expanded='false'><i class='ti-menu'></i></a>" +
                                "<div class='dropdown-menu dropdown-menu-left'>" +
                                "<a class='dropdown-item' href='#' onclick='JoinMeeting(\"" + row["meetingID"] + "\",\"" + row["attendeePW"] + "\")'><i class='mdi mdi-account-multiple-plus mr-2 text-muted font-18 vertical-middle'></i>进入教室</a>"+
                                "<a class='dropdown-item' href='#' onclick='EndMeeting(\"" + row["meetingID"] + "\",\"" + row["moderatorPW"] + "\")'><i class='mdi mdi-close-outline mr-2 text-muted font-18 vertical-middle'></i>关闭教室</a></div></div>";

                            return html;

                        }
                    }

                ]


            });
        });


        function ShowPopup(url) {
            var modalId = 'modalDefault';
            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
            $.get(url)
                .done(function (response) {
                    modalPlaceholder.html(response);
                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                });
        }
        function ShowStudents(table) {

            var modalId = 'modalStudents';

            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');

            $("#tbody").html(table);

            popup = $('#' + modalId + '').modal({
                keyboard: false,
                backdrop: 'static'
            });
        }
        function JoinMeeting(meetingId, pwd) {


            $.ajax({
                type: 'GET',
                url: '/Classroom/Join?meetingid=' + meetingId + "&pwd=" + pwd,
                success: function (data) {
                    var url = data.clientURL + "/bigbluebutton/api/join?" + data.ps;
                    window.open(url, "_blank");

                }
            });
        }

        function EndMeeting(meetingId, pwd) {

            $.ajax({
                type: 'POST',
                url: '/Classroom/End?meetingid=' + meetingId + "&pwd=" + pwd,
                success: function (data) {
                  
                    ShowMessage(data.message);
                    table.draw();
                }
            });

        }
        function SubmitAddEdit(form) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: '/Classroom/Add',
                    data: data,
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {
                            popup.modal('hide');
                            ShowMessage(data.message);
                            if (table) {
                                table.draw();
                            }

                        } else {
                            ShowMessageError(data.message);
                        }
                    }
                });

            }
            return false;
        }



    </script>
}
